<template>
    <div style="padding: 20px;height: 100%;">维护记录
        <div style="height: 500px;position: absolute;top: 0;width: 800px;">
            <el-button @click="start1()">播放1</el-button>
            <el-button @click="start2()">播放2</el-button>
            <!-- 可用 -->
            <!-- <video id="video2" url="ws://192.168.1.97:8088/rtsp://192.168.1.97:8009/r" autoplay width="500" height="300"></video> -->
           
            <!-- <jessibuca-bto url="http://192.168.1.107:8090/chengkou/101/hls.m3u8" title="预览"></jessibuca-bto> -->

            <!-- 可用 -->
            <!-- <video-player class="video-player vjs-custom-skin" ref="videoPlayer"
                :options="playerOptions"></video-player> -->
            <!-- 可用 -->
            <video id="videoElement" controls autoplay controlsList="nodownload noplaybackrate" ></video>

            
            <!-- <video ref="video" id="video" controls autoplay></video> -->
            <!-- <video src="" id="video"></video> -->
        </div>

    </div>
</template>

<script>
import mpegts from 'mpegts.js'; // 测试能播放H.264编码方式
import JessibucaBto from "@/components/TZ/JessibucaBto"; // 暂时不能用


import EasyPlayer from '@easydarwin/easyplayer'

export default {
    components: { JessibucaBto, EasyPlayer },
    data() {
        return {
            vidioURL: 'http://192.168.1.107:8090/chengkou/101/hls.m3u8',
            playerInstance: null,
            // playerOptions: {
            //     //视频url设置,直播流为例
            //     sources: [{
            //         // src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',//视频文件地址
            //         src:'http://192.168.1.107:8090/chengkou/101/hls.m3u8'
                        // src: 'http://192.168.1.107:8090/qijiang/702.live.ts'
            //         // type: 'application/x-mpegURL'//视频类型，这里可以不写，如果写一定要写对，否则会无法播放
            //     }],
            //     // 其他设置项
            //     notSupportedMessage: "此视频暂无法播放，请稍后再试",//提示信息
            //     autoplay: true,//是否自动播放
            //     controls: true, // 是否显示控制栏
            //     // poster: 'http://path/to/poster.jpg',//视频封面
            // }
            playerOptions: {
                playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
                autoplay: true, // 如果为true,浏览器准备好时开始回放。
                muted: false, // 默认情况下将会消除任何音频。
                loop: false, // 是否视频一结束就重新开始。
                preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
                language: 'zh-CN',
                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [{
                    type: "application/x-mpegURL", // 类型
                    src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',//视频文件地址
                    // src: 'http://192.168.1.107:8090/youyang/102.live.ts' // url地址H.264
                    // src: 'http://192.168.1.107:8090/qijiang/702.live.ts' // url地址H.265
                }],
                poster: '', // 封面地址
                notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                    timeDivider: true, // 当前时间和持续时间的分隔符
                    durationDisplay: true, // 显示持续时间
                    remainingTimeDisplay: false, // 是否显示剩余时间功能
                    fullscreenToggle: true // 是否显示全屏按钮
                }
            }
        }
    },
    mounted() {
        //video：需要绑定的video控件ID
        //127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000
        // this.webRtcServer = new WebRtcStreamer('video', 'http://192.168.1.97:8000')
        //需要查看的rtsp地址
        // this.webRtcServer.connect('rtsp://user:password@ip:port/cam/realmonitor?channel=1&subtype=0')
        //rtsp://user:password@ip:port/h264/ch1/main/av_stream--海康
        //rtsp://user:password@ip:port/cam/realmonitor?channel=1&subtype=0--大华
    },
    methods: {
        start1() {
            if (mpegts.getFeatureList().mseLivePlayback) {
                var videoElement = document.getElementById('videoElement');
                var player = mpegts.createPlayer({
                    type: 'mse',  // could also be mpegts, m2ts, flv
                    isLive: true,
                    // url: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',
                    url: 'http://192.168.1.107:8090/youyang/102.live.ts' // url地址H.264
                    // url: 'http://192.168.1.107:8090/qijiang/702.live.ts' // url地址H.265
                });
                player.attachMediaElement(videoElement);
                player.load();
                player.play();
            }
            return;
        },
        // 方式1需要启动webrtc转码服务
        start2() {
            // this.webRtcServer = new WebRtcStreamer('video2', 'http://192.168.1.97:8000')
            // this.webRtcServer.connect('rtsp://192.168.1.97:8009/r')
        },
        // 关闭视频流
        // beforeDestroy() {
        //     this.webRtcServer.disconnect()
        //     this.webRtcServer = null
        // },

    }
}
</script>

<style lang="scss" scoped>
video::-webkit-media-controls-timeline {
				  display: none;
				}</style>